<!--  javascript for menu  -->
<script type="text/javascript">
	function writeText(txt, src){
		document.getElementById("menu_desc").innerHTML=txt;
		document.getElementById("menu_img").src=src;
	}
</script>

<!-- load css files !-->
<link rel="stylesheet" href="../resources/css/header.css" type="text/css">

<!-- Menu image and map -->

<img id="menu_img" width="250" height="250" class='menu'  src="../resources/img/menu_static.png" usemap="#menu" />
<map name="menu">
	<area shape ="poly" coords ="112, 42, 237, 59, 242, 92, 117, 60"
	onmouseover="writeText('Register Description', '../resources/img/menu_register.png')"
	href ="../model/register.php" alt="Sun" />
	
	<area shape ="poly" coords ="117, 60, 242, 92, 223, 141, 105, 76"
	onmouseover="writeText('My team Description', '../resources/img/menu_myteam.png' )"
	href ="../model/team.php"  alt="Sun" />
	
	<area shape ="poly" coords ="105, 76, 223, 141, 195, 190, 92, 92"
	onmouseover="writeText('My schedule Description', '../resources/img/menu_myschedule.png')"
	href ="../model/schedule.php"  alt="Sun" />
	
	<area shape ="poly" coords ="92, 92, 195, 190, 152, 223, 77, 98"
	onmouseover="writeText('Standings Description', '../resources/img/menu_standings.png')"
	href ="../model/standing.php"  alt="Sun" />
	
	<area shape ="poly" coords ="77, 98, 152, 223, 97, 240, 60, 107"
	onmouseover="writeText('History Description', '../resources/img/menu_history.png')"
	href ="../model/history.php"  alt="Sun" />
</map> 

<p class='menu_text' id="menu_desc"></p>
<div class="logoff">
	<form action="../model/logout.php" method="post">
		<input type="submit" name="logoff" value = "logoff" />
	</form>
</div>